<template>
  <view class="Login">
    <view class="header">
      登录
      <view class="link" @click="Login">验证码登录</view>
    </view>
    <image
      class="avtar"
      src="../../../static/PersonalCenter/avtarf.png"
      mode=""
    />
    <view class="wrap">
      <view class="row">
        <image
          class="img"
          src="../../../static/PersonalCenter/icon1.png"
          mode=""
        />
        <input
          type="number"
          maxlength="11"
          v-model="mobile"
          placeholder="请输入您的手机号码"
        />
      </view>
      <view class="row">
        <image
          class="img"
          src="../../../static/PersonalCenter/icon3.png"
          mode=""
        />
        <input type="password" v-model="password" placeholder="请输入密码" />
      </view>
    </view>
    <view class="btn" @click="login">登录</view>
    <view class="jumps">
      <view @click="forget">忘记密码</view>
      <view @click="regisClick">手机注册</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mobile: "",
      token: "",
      password: "",
    };
  },
  methods: {
    // 返回上级
    navigateBack() {
      uni.navigateBack();
    },
    //登录
    async login() {
      if (this.telphone == "") {
        uni.showToast({
          title: "手机号码不能为空",
          icon: "none",
        });
        return;
      }
      if (this.password == "") {
        uni.showToast({
          title: "密码不能为空",
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "正在登录",
      });
      const { data } = await this.$myRequest({
        url: "user/login",
        method: "POST",
        data: {
          mobile: this.mobile,
          password: this.password,
        },
      });
      if (!data.code == 1) {
        uni.hideLoading();
        uni.showToast({
          icon: "none",
          title: data.msg,
        });
      } else {
        uni.hideLoading();
        uni.setStorageSync("token", data.data.token);
        uni.setStorageSync("mobile", data.data.mobile);
        uni.switchTab({
          url: "../../index/index",
        });
      }
    },

    // 忘记密码
    forget() {
      uni.navigateTo({
        url: "../forget/forget",
      });
    },
    //注册
    regisClick() {
      uni.navigateTo({
        url: "../register/register",
      });
    },
    //验证码登录
    Login() {
      uni.navigateTo({
        url: "../Login/Login",
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff;
  width: 750rpx;
}
.Login {
  .header {
    width: 100%;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    .link {
      position: absolute;
      right: 30rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #333333;
    }
  }
  .avtar {
    display: block;
    width: 156rpx;
    height: 156rpx;
    margin: 96rpx auto 0;
  }
  .wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 0 60rpx;
    margin-top: 110rpx;
    .row {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      border-bottom: 1rpx solid #eee;
      padding-bottom: 25rpx;
      position: relative;
      margin-bottom: 62rpx;
      .img {
        display: block;
        width: 24rpx;
        height: 26rpx;
        margin-right: 18rpx;
      }
      input {
        flex: 1;
        display: block;
        border: none;
        background: none;
        outline: none;
        font-size: 28rpx;
        font-weight: 400;
        color: #333;
      }
      .authBtn {
        position: absolute;
        right: 0;
        font-size: 26rpx;
        font-weight: 400;
        color: #c52b2e;
      }
    }
  }
  .btn {
    width: 530rpx;
    height: 76rpx;
    background: #c52b2e;
    border-radius: 38rpx;
    text-align: center;
    line-height: 76rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #ffffff;
    margin: 130rpx auto 0;
  }
  .jumps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;
    view {
      display: block;
      font-size: 26rpx;
      font-weight: 400;
      color: #999999;
      padding: 0 25rpx;
      position: relative;
    }
    view:nth-child(1):after {
      position: absolute;
      content: "";
      width: 1rpx;
      height: 30rpx;
      background: #999;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
